<template>
	<view class="swiper_btn_component">
		<!-- 轮播图  duration这个是让这个图片跳转多少秒之内完成  interval这个多少秒跳转一次图片-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperImgList" :key="index" @click="getElemt(item)">
				<view class="swiper-item">
					<image :src="item.src" mode="" v-if="item.src"></image>
					<image v-else :src="item.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="buttonView"
			:style="[{border:'1px solid rgb('+colorArr.r+','+colorArr.g+','+colorArr.b+')'},{background:'linear-gradient(to right,'+'rgb('+colorArr.r+','+colorArr.g+','+colorArr.b+'),'+'rgb('+colorArr.b +','+colorArr.g+','+colorArr.r+')'+')'}]">
			<button type="default" size="mini" @click="gotoClassify">分类</button>
			<!-- :style="[{background:'linear-gradient(to right,'+'rgb('+colorArr.r+','+colorArr.g+','+colorArr.b+'),'+'rgb('+colorArr.b +','+colorArr.g+','+colorArr.r+')'+')'}]" -->
			<button type="default" size="mini">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "swiper_component",
		data() {
			return {
				colorArr: {
					r: 0,
					g: 0,
					b: 0
				},
				timeout: null,
				pagePath: ''
			};
		},
		props: ['swiperImgList'],
		// 组件的生命周期
		created() {
			this.colorChang()
			this.getTabbar()
		},

		detached() {
			clearInterval(this.timeout)
		},

		methods: {
			gotoClassify() {
				if (this.pagePath.search('wallpaper') != -1) {
					uni.navigateTo({
						url: '../../subpkg/wallpaper_classify/wallpaper_classify'
					})
				}
				if (this.pagePath.search('novel') != -1) {
					uni.navigateTo({
						url: '../../subpkg/novel_classify/novel_classify'
					})
				}
				if (this.pagePath.search('movie') != -1) {
					uni.navigateTo({
						url: '../../subpkg/movie_classify/movie_classify'
					})
				}

			},
			getTabbar() {
				var tabbar = getCurrentPages()
				this.pagePath = tabbar[0].route
			},

			colorChang() {
				this.sel = 1
				this.timeout = setInterval(() => {
					this.colorArr.r = parseInt(Math.floor(Math.random() * 255))
					this.colorArr.g = parseInt(Math.floor(Math.random() * 255))
					this.colorArr.b = parseInt(Math.floor(Math.random() * 255))
				}, 1500)
			},

			getElemt(item) {
				if (this.pagePath.search('wallpaper') != -1) {
					uni.navigateTo({
						url: `../../subpkg/wallpaper_img/wallpaper_img?classify=${item.classify}&imgname=${item.title}.jpg`
					})
				}
				if (this.pagePath.search('novel') != -1) {
					uni.navigateTo({
						url: `/subpkg/novel_catalog/novel_catalog?classify=${item.classify}&title=${item.title}&author=${item.author}&info=${item.info}&image=${item.image}`
					})
				}
				if (this.pagePath.search('movie') != -1) {
					uni.navigateTo({
						url: `../../subpkg/movie_detail/movie_detail?name=${item.title}&director=${item.director}&info=${item.info}&star=${item.star}&classify=${item.classify}&img_src=${item.src}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.swiper_btn_component {
		swiper {
			position: relative;
			left: 50%;
			height: 272rpx;
			width: 90%;
			transform: translate(-50%);
			border-radius: 20px;
			overflow: hidden;
			margin: 10rpx 0;

			swiper-item {
				height: 100%;
				width: 100%;
			}

			image {
				// height: 100%;
				width: 100%;
			}
		}

		.buttonView {
			position: relative;
			left: 50%;
			transform: translate(-50%);
			// display: flex;
			// justify-content: space-between;
			// height: 100px;
			width: 90%;
			text-align: center;
			// line-height: 240rpx;
			border-radius: 15px;

			button {
				background-color: rgba(0, 0, 0, 0.1);
				color: #fff;
				margin: 10rpx 10rpx;
				// opacity: 0.3;
			}
		}
	}
</style>
